{% extends 'common/panel.html' %}
{% block title %}{{instance.name}}{% endblock title %}
{% block panel %}

<h1>
    <img src="/media/wmm/img/folder.png"/>
    <small><small>Folder </small></small> 
    &nbsp;&nbsp;{{instance.name}}
</h1>
<div class="tabs">
    <ul>
        <li><a href="#Inputs"><span>Attributes</span></a></li>
    </ul>
    <div id="Inputs">
        <ul class="metadata">
          {% if instance.user.first_name and instance.user.last_name %} 
            <li class="creator">Created By {{instance.user.first_name}} {{instance.user.last_name}}</li>
          {% else %}
            <li class="creator">Created By {{instance.user.username}}</li>
          {% endif %}
            <li class="created">Created {{instance.date_created|date:"d M, Y P"}}</li>
            <li class="modified">Modified {{instance.date_modified|date:"d M, Y P"}}</li>
            <br class="clear" />
        </ul>
        
        <h2>Contents</h2>
        
            {% if instance.num_scenarios > 0 %}
            <p style="margin-bottom:0px">Multi-Objective Scenarios: 
            {% for scenario in instance.scenario_set %}
            <p style="margin-left:25px;margin-top:0px;margin-bottom:0px;">{{scenario.name}}</p>
            {% endfor %}
            {% endif %}
            
            {% if instance.num_smps > 0 %}
            <p style="margin-bottom:0px">SMP Characterization Sites: 
            {% for smp in instance.smp_set %}
            <p style="margin-left:25px;margin-top:0px;margin-bottom:0px;">{{smp.name}}</p>
            {% endfor %}
            {% endif %}
            
            {% if instance.num_aois > 0 %}
            <p style="margin-bottom:0px">Areas of Interest: 
            {% for aoi in instance.aoi_set %}
            <p style="margin-left:25px;margin-top:0px;margin-bottom:0px;">{{aoi.name}}</p>
            {% endfor %}
            {% endif %}
            
            {% if instance.num_kmls > 0 %}
            <p style="margin-bottom:0px">Uploaded KMLs: 
            {% for kml in instance.kml_set %}
            <p style="margin-left:25px;margin-top:0px;margin-bottom:0px;">{{kml.name}}</p>
            {% endfor %}
            {% endif %}
            
            {% if instance.num_folders > 0 %}
            <p style="margin-bottom:0px">Other Folders: 
            {% for folder in instance.folder_set %}
            <p style="margin-left:25px;margin-top:0px;margin-bottom:0px;">{{folder.name}}</p>
            {% endfor %}
            {% endif %}
            
            {% if instance.num_features == 0 %}
            <p><i>Currently empty</i></p>
            {% endif %}
        
        <h2>Description</h2>
            {% if instance.description %}
            <p>{{instance.description}}</p>
            {% else %}
            <p><i>No Description</i></p>
            {% endif %}
        
        <h2>Hint</h2>
        <div class="draghint" style="width:95%; font-size:11px;">
            <img src="{{MEDIA_URL}}common/images/dragdrophint.png" />
            To populate your folder, simply drag and drop your features into the folder after saving.
            <br style="clear:both;" />
        </div>
    </div>        
    
</div>
    
<style type="text/css">

label {
    clear: both;
    color: #344E63;
    display: block;
    font-size: 12px;
    font-weight: normal !important;
    margin: 0 0 5px;
    padding: 0;
    text-shadow: 0 1px 0 #FCFAFF;
}
label.header {
    font-weight: bold !important;
}
form input[type="checkbox"] {
    top: 2px !important;
}

td.left-column {
    width: 10%;
}
td.obj-column {
    width: 25%;
}
td.intro-40-column {
    width: 40%;
    align: "right";
    valign: "top";
}
td.inrto-80-column {
    width: 80%;
    align: "right";
    valign: "top";
}
td.intro-middle-column {
    width: 10%;
}
td.middle-column {
    width: 20%;
}
td.right-column {
    width: 10%;
}

div .step { 
    -moz-box-shadow: 5px 5px 5px #ddd;
    -webkit-box-shadow: 5px 5px 5px #ddd;
    box-shadow: 5px 5px 5px #ddd; 
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
    border: 1px #ddd solid;
    padding: 6px;
    margin-top: 4px;
    margin-bottom: 8px;
    background-color: white; 
    background-repeat: no-repeat;
    min-height: 54px;
}
div .inputfield { padding-bottom: 14px; }
span.form-image { float: left; margin-left: -66px; }
span.form-image > img { width:46px; height:46px; }
</style>

{% endblock panel %}
